<template>
    <div>
      <h3>编号偏小先轮播</h3>
      <el-table  ref="multipleTable" :data="tableData" style="width: 100%">
        <!--<el-table-column prop="_id" label="编号" width="180"> </el-table-column>-->
        <el-table-column type="index"  label="序号"> </el-table-column>
        <el-table-column prop="url" label="图片" width="180">
          <template slot-scope="scope">
            <img  :src="scope.row.url" alt="" style="width: 200px;height: 100px">
          </template>
        </el-table-column>
        <el-table-column prop="goodsName" label="关联的商品信息"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!--<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">上移</el-button>-->
            <!--<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">下移</el-button>-->
            <el-button  size="mini" type="danger"  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-button @click="addBanner">继续添加</el-button>
      </el-row>
      <el-dialog  :visible.sync="dialogFormVisible" width="80%">
        <el-row>
          <el-col :span="8">
            <h3>图片</h3>
            <el-upload class="upload-demo" action="" list-type = "picture-card" :on-change = "files" :file-list="bannerfiles"  :limit=1 :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>

            <div class="footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="sutaddBanner">确 定</el-button>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="nav-letf">
              <span><el-button type="primary" @click="all" plain>全部</el-button></span>
              <span  v-for="item in typeArray"><el-button type="primary" @click="choosetype(item.type)" plain>{{item.type}}</el-button></span>
            </div>
            <div class="nav-right">
              <el-row>
                <el-col :span="6"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
                <el-button icon="el-icon-search" @click="search" circle></el-button>
              </el-row>
              <el-table :data="goodsData" style="width: 100%"  v-loading="loading"  highlight-current-row  @current-change="getCurrentRow">
                <!--<el-table-column label="" width="50">-->
                  <!--<template scope="scope">-->
                    <!--<el-radio :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.$index ,scope.row)">&nbsp;</el-radio>-->
                  <!--</template>-->
                <!--</el-table-column>-->
                <el-table-column type="index"  width="50" label="序号"></el-table-column>
                <el-table-column prop="goodName" label="产品" > </el-table-column>
                <el-table-column prop="goodsfile" label="图片" width="100">
                  <template slot-scope="scope">
                    <img  :src="scope.row.goodsfiles[0]" alt="" style="width: 50px;height: 40px">
                  </template>
                </el-table-column>
                <el-table-column prop="costPrice" label="价钱" > </el-table-column>
              </el-table>
            </div>
            <div class="block">
              <el-pagination background @current-change="handleCurrentChange"  layout="total, prev, pager, next" :total="count"> </el-pagination>
            </div>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
</template>

<script>
    import axios from "axios"

    export default {
        data() {
            return {
                tableData: [],
                dialogFormVisible:false,
                bannerFile:{},
                bannerfiles:[],

                typeArray:[],
                goodsData:[],
                input:"",
                loading: true,
                type:"",
                page:1,
                count:0,
                radio:"",
                chooseGoods:{},
            }
        },
        mounted(){
            this.init()
        },
        methods: {
            getGoods(){
                let  param ={
                  page:this.page,
                  pageSize:10,
                  type:this.type,
                  shelves:true
                }
                axios.get("/goodslist/getShelvesGoods",{
                    params:param
                }).then((response)=>{
                    let res = response.data;
                    if (res.status == "0"){
                      this.goodsData = res.result.list;
                      this.count = res.result.count;
                      this.loading = false;
                    }
                })
            },
            gettype(){
                axios.get("/typelist/getType").then((response)=>{
                    let res = response.data;
                    this.typeArray = res.result.list;
                })
            },
            choosetype(type){
                this.type = type;
                this.getGoods();
            },
            all(){
                this.type = "";
                this.getGoods();
            },
            search(){
                axios.post("/goodslist/getOneShelvesGoods",{
                  goodName:this.input
                }).then((response)=>{
                  let res = response.data;
                  this.goodsData = res.result.list;
                })
            },
            getCurrentRow(row){
                // console.log(row);
              if(row == null){
                this.chooseGoods = {};
              }else{
                this.chooseGoods = row;
              }
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getGoods()
            },

            init(){
                axios.get("/banner/getBanner").then((response)=>{
                  let res = response.data;
                  this.tableData = res.result.list;
                })
            },
            addBanner(){
                this.dialogFormVisible=true;
                this.getGoods();
                this.gettype();
            },
            files(file){
                console.log(file);
                this.bannerFile = file;
            },
            open2() {
              this.$confirm('请选择关联的商品，然后提交', '提示', {
                showCancelButton:false,
                type: 'warning'
              })
            },
            sutaddBanner(){
                if(JSON.stringify(this.chooseGoods) == "{}") {
                  this.open2();
                }else{
                    var from = new FormData();
                    from.append('url', this.bannerFile.raw);
                    from.append('goodsId', this.chooseGoods._id);
                    from.append('goodsName', this.chooseGoods.goodName);

                    let config = {
                        headers: {
                          'Content-Type': 'multipart/form-data'
                        }
                    };
                    axios.post("/banner/addBanner",from ,config).then((ress)=>{
                        let res = ress.data;
                        if(res.status == "0"){
                          this.dialogFormVisible=false;

                          // this.chooseGoods = {};
                          // this.$refs.multipleTable.clearSelection();

                          this.bannerfiles = [];
                          this.bannerFile = {};
                          this.init()
                        }else{

                        }
                    })
                }
            },
            handleDelete(tab, event) {
                axios.post("/banner/delBanner",{
                    id:event._id
                }).then((ress)=>{
                    let res = ress.data;
                    if(res.status == "0"){
                      this.init()
                    }else{

                    }
                })
            },
        }
    }
</script>

<style  lang="scss" scoped>
  .el-tabs{
    margin-top: 20px;
  }
  .nav-letf{
    width: 100px;
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
  }
  .nav-right{
    width: calc(100% - 120px);
    display: inline-block;
    vertical-align: top;
  }
  .footer{
    margin-top: 100px;
  }
  .nav-letf .el-button{
    width: 100% ;
    padding: 0;
    height: 40px;
    margin-bottom: 10px;
  }
  .demo-input-suffix{
    margin-bottom: 20px;
  }
  .left-box{
    display: inline-block;
    margin-top: 20px;
  }
  .right-box{
    display: inline-block;
    vertical-align: top;
    margin-top: 20px;
    margin-left: 50px;
  }
  .mlists{
    display: inline-block;
    margin-right: 20px;
  }
</style>
